<template>
  <div class="work-calendar">
    <el-row type="flex" justify="end">
      <el-select v-model="currentYear" size="small" style="width: 120px" @change="dateChange">
        <el-option v-for="item in yearList" :key="item" :label="item" :value="item">{{ item }}</el-option>
      </el-select>
      <el-select v-model="currentMonth" size="small" style="width: 120px;margin-left:10px" @change="dateChange">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item">{{ item }}</el-option>
      </el-select>
    </el-row>
    <el-calendar v-model="currentDate">
      <template slot="dateCell" slot-scope="{date, data}">
        <div ref="workItem" class="oooo" @click="currentClick(data)">
          <p>{{ data.day.split('-')[2] }}</p>
          <span v-if="isWeek(date)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    startDate: {
      type: Date,
      default: () => new Date()
    }
  },
  data () {
    return {
      currentMonth: null, // 当前月份
      currentYear: null, // 当前年份
      currentDate: null,
      yearList: []
    }
  },
  computed: {},
  watch: {},
  created () {
    //    处理起始时间
    // 获取到当前的年份
    this.currentYear = this.startDate.getFullYear()
    // 组件要求起始时间必须是 周一开始 以一个月为开始
    this.currentMonth = this.startDate.getMonth() + 1
    // 根据当前的年 生成可选年份 前后各加5年
    this.yearList = Array.from(Array(11), (value, index) => this.currentYear + index - 5)
    // 计算 当年当月的第一个周一 再加上 四周之后的一个月月份
    this.dateChange()
  },
  mounted () {},
  methods: {
    // 是否是休息日
    isWeek (value) {
      console.log(this.currentMonth)
      return value.getMonth() + 1 === this.currentMonth && (value.getDay() === 6 || value.getDay() === 0)
    },

    // 年月份改变之后
    dateChange() {
      const year = this.currentYear
      const month = this.currentMonth
      this.currentDate = new Date(`${year}-${month}-1`) // 以当前月的1号为起始
    },
    // 点击日历项
    currentClick (data) {
      this.currentYear = data.day.split('-')[0]
      this.currentMonth = data.day.split('-')[1]
    }
  }
}
</script>

<style scoped lang="scss">
 ::v-deep .el-calendar__button-group{
  display: none;
}
::v-deep .el-row--flex.is-justify-end {
  transform: translateY(32px);
}
.el-calendar-table td.is-selected {
  p {
    position: relative;
    width: 20px;
    background-color: #5282fd;
    border-radius: 50%;
    text-align: center;
    color: #fff;
  }
}
::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child,  ::v-deep .el-calendar-table__row td.prev{
  border:none;
 }
 .rest {
  display: inline-block;
  position: relative;
  right: -37px;
  top: -34px;
  width: 20px;
  height: 20px;
  background-color: #fa7c4d;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
 }
</style>
